<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vm_div">
    <h1>{{msg}}</h1>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //创建vue对象,此对象就是一个VM视图模型独享,负责将页面元素和变量进行绑定
    let vm=new Vue({
        el:"#vm_div",//el=element元素,每一个vue对象负责管理一个页面中某一部分元素
        data:{msg:"hello vue!"}

    })

    let count=0;
    setInterval(function () {
        count++;
        //当vue对象中的msg变量发生改变时,页面元素会自动跟着发生改变
        //因为在vue对象中对页面元素和变量进行了绑定操作
        vm.msg=count;
        //下面的jq代码虽然也能实现相同的功能,但是每次需要进行dom操作(遍历查找元素)
        //执行效率低
        //$("h1").text(count);
    },1000)
</script>
</body>
</html>